<template>
  <div class="container">
		<div class="list-btn" @click="toPageList">检测记录</div>
		<div class="img-box">
			<div class="bubble b1">色斑</div>
			<div class="bubble b2">毛孔</div>
			<div class="bubble b3">黑头</div>
		</div>
		<div class="main-box">
			<div class="text-box">请摘下眼镜露出额头并拍摄正脸</div>
			<img  @click="UploadImgBtn" src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/camera.png" alt="" class="camera">
		</div>

		<div class="draw-box">
			<div class="icon white p1"></div>
			<div class="icon white p2"></div>
			<div class="icon blue p3"></div>
			<div class="icon blue p4"></div>
			<div class="block1">
				<div>FACE<br>DETE<br>&nbsp;CTION</div>
			</div>
			<div class="block2">
				<div>&nbsp;&nbsp;INT<br>ELLIG<br>&nbsp;&nbsp;ENCE<br>EXPERT</div>
			</div>
			
			
		</div>
	</div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)

import small from '@/smallapp/small'

import 'vant/lib/index.css'

import { skinAdd } from '@/api/dz/aiDzApi'

export default {
	data() {
		return {

		}
	},
	methods: {
		Jump(url, data) {
			this.$JumpPath(this, url, data, 0)
		},
		toPageList() {
			this.Jump('aiList')
		},
		uploadCardOpposite(file) {
			// console.log('shotaction', file)
      this.uploadImgsFn(file)
		},

		/**
     * 上传图片
     */
    UploadImgBtn(){
			let mediaObj = {
        count: 1,
        mediaType: ['image'],
        sourceType: ['camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
			}
      small.wxUploadMedia(mediaObj).then(data => {
				this.skinAddFn(...data)
      })
    },
		skinAddFn(imgurl) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      skinAdd({
				image_url: imgurl
			}).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
					let id = res.data
					this.Jump('aiResult',{skin_id:id})
        } else {
					Toast(res.msg)
        }
      })
		},
	}
}
</script>
<style lang="scss">
.app-wrapper.h100 {
	background: #020B1E;
	padding: 0;
}
.container {
	background-image: url(https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 100vw;
	min-height: 100vh;
	background-color: #020B1E;
	font-size: 28px;
	position: relative;
	font-weight: 500;
	.list-btn {
		color: #414757;
		text-align: center;
		line-height: 66px;
		width: 204px;
		height: 74px;
		background: rgba(0,9,28,1);
		border: 4px solid rgba(30,53,79,1);
		border-right: none;
		border-radius: 100px 0 0 100px;
		position: absolute;
		right: 0;
		top: 32px;
	}
	.bubble {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90px;
		height: 90px;
		background-image: url(https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/bubble.png);
		background-size: 100% 100%;
		color: #020B1E;
		&.b1 {
			width: 114px;
			height: 114px;
			left: 30px;
			top: 458px;
		}
		&.b2 {
			right: 39px;
			top: 181px;
		}
		&.b3 {
			right: 39px;
			top: 515px;
		}
	}
	.main-box {
		width: 100%;
		// height: ;
		text-align: center;
		position: absolute;
		top: 742px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.camera {
			width: 144px;
			height: 144px;
			margin: 32px 0;
		}
	}
	.text-box {
		color: #fff;
		line-height: 50px;
		letter-spacing: 10px;
		width: 342px;
		text-align: center;
	}
	.block1 {
		position: absolute;
		bottom: 100px;
		left: 49px;
		letter-spacing: 8px;
		line-height: 56px;
		color: #414757;
		width: 130px;
	}
	.block2 {
		position: absolute;
		bottom: 100px;
		right: 31px;
		letter-spacing: 8px;
		line-height: 56px;
		color: #414757;
		width: 160px;
	}
	.icon {
		width: 25px;
		height: 25px;
		border: 1px solid rgba(151,151,151,1);
		position: absolute;
		&.white {
			background: #fff;
		}
		&.blue {
			background: rgba(75,197,248,1);
		}
		&.p1 {
			left: 46px;
			bottom: 344px;
		}
		&.p2 {
			right: 120px;
			bottom: 400px;
		}
		&.p3 {
			left: 127px;
			bottom: 288px;
		}
		&.p4 {
			right: 39px;
			bottom: 344px;
		}
	}

}
</style>
